 <template>
  <div style="height: calc(100vh - 48px)">
    <div class="filter-body">
      <div slot="title" class="title">
        筛选 <span class="filter-num">{{ filteredList.length }}</span>
      </div>
      <div style="height: 64px; background: #f5f5f5"></div>
      <div class="tag-wrap" v-if="filteredList.length > 0" style="background: #fff; padding: 24px">
        <div v-for="(item, i) in filteredList" :key="i">
          <div v-if="item.value" class="filter-tag">
            <div @click="delFiltered(item.key, item.type, item.multi)">
              <div>
                <span class="tag-text">{{ `${item.title}：${item.value}` }}</span>
              </div>
              <div>
                <a-icon type="close" style="float: right; margin-top: -15px" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 24px; background: #fff">
        <div>
          <a-form-model ref="ruleForm" layout="vertical" :model="queryParam">
            <a-form-model ref="ruleForm" layout="vertical" :model="queryParam">
              <a-form-model-item v-for="(item, i) in filterDropdownList" :key="i" :label="item.title">
                <a-input
                  v-if="item.scopedSlots.filterDropdown === 'searchDropdown'"
                  :placeholder="'请输入'[item.title]"
                  v-model="queryParam[item.searchIndex]"
                />
                <a-select
                  :mode="item.multi ? 'multiple' : 'default'"
                  v-if="item.scopedSlots.filterDropdown === 'selectDropdown'"
                  :placeholder="'请选择'[item.title]"
                  allowClear
                  v-model="queryParam[`${item.searchIndex}all`]"
                  @change="(a) => changeSelect(a, item.searchIndex)"
                  :labelInValue="true"
                >
                  <a-select-option v-for="(items, i) in item.options" :key="i" :value="items.key">{{
                    items.label
                  }}</a-select-option>
                </a-select>
                <a-range-picker
                  v-if="item.scopedSlots.filterDropdown === 'datePicker'"
                  v-model="dateForm[item.searchIndex]"
                  format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="['开始时间', '结束时间']"
                  @change="(a, b) => onOk(a, b, item.searchIndex)"
                  style="width: 100%"
                  show-time
                />
                <j-select-user-by-dep
                  v-if="item.scopedSlots.filterDropdown === 'selectPeople'"
                  v-model="queryParam[`${item.searchIndex}username`]"
                  :multi="item.multi"
                  @changeRow="(a, b, c) => onChangeUser(b || {}, item.searchIndex)"
                ></j-select-user-by-dep>
              </a-form-model-item>
            </a-form-model>
          </a-form-model>
        </div>
      </div>
      <div style="height: 100px; background: #f5f5f5"></div>
      <div class="footSubmit">
        <a-button style="margin-right: 10px" @click="save(0)">重置</a-button>
        <a-button type="primary" @click="save(1)">确定</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getObjectKeys, getObjectValues, getArr, getList } from '@/utils/util'
export default {
  components: {},
  data() {
    return {
      queryParam: {},
      filterDropdownList: [],
      dateForm: [],
    }
  },
  computed: {
    filteredList() {
      return [
        ...getList(getArr(Object.keys(this.queryParam), Object.values(this.queryParam)), this.filterDropdownList),
        ...getList(getArr(getObjectKeys(this.dateForm), getObjectValues(this.dateForm)), this.filterDropdownList),
      ]
    },
  },
  watch: {},
  created() {},
  methods: {
    changeSelect(v, index) {
      console.log(v, index, Array.isArray(v), '1111')
      if (v && Array.isArray(v)) {
        this.queryParam[index] = v
          .map((e) => {
            return e.key
          })
          .toString()
      } else {
        this.queryParam[index] = v ? v.key : ''
      }
    },
    getData(a, b, c) {
      this.queryParam = a
      this.dateForm = b
      this.filterDropdownList = c.filter((e) => {
        return e.scopedSlots.filterDropdown !== 'tooltip'
      })
    },
    onOk(a, b, key) {
      if (a.length == 0) {
        this.queryParam[`${key}Begin`] = ''
        this.queryParam[`${key}End`] = ''
        this.dateForm[key] = []
        return
      }
      this.dateForm[key] = b
      this.queryParam[`${key}Begin`] = b[0]
      this.queryParam[`${key}End`] = b[1]
    },
    onChangeUser(v, index) {
      this.queryParam[index] = v
        .map((e) => {
          return e.id
        })
        .toString()
      this.queryParam[`${index}realname`] = v
        .map((e) => {
          return e.realname
        })
        .toString()
      this.queryParam[`${index}username`] = v
        .map((e) => {
          return e.username
        })
        .toString()
    },
    save(e) {
      if (e === 0) {
        this.queryParam = {}
        this.dateForm = []
      }
      this.$nextTick(() => {
        this.$emit(
          'searchDate',
          e === 1 ? this.queryParam : {},
          e === 1 ? this.dateForm : [],
          e === 1 ? this.filteredList.length : 0,
          e
        )
      })
    },
    delFiltered(a, b, c) {
      console.log(a, b, c, 'del')
      if (b == 0) {
        this.queryParam[a] = ''
        this.queryParam[`${a}all`] = c ? [] : {}
      } else if (b == 1) {
        this.queryParam[a] = ''
        this.queryParam[`${a}realname`] = ''
        this.queryParam[`${a}username`] = ''
      } else if (b == 2) {
        this.queryParam[`${a}Begin`] = ''
        this.queryParam[`${a}End`] = ''
        this.dateForm[a] = []
      } else {
        this.queryParam[a] = ''
      }
      console.log(this.queryParam, this.dateForm, this.filteredList)
    },
  },
}
</script>
<style scoped lang='less'>
.title {
  font-size: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  padding: 24px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9;
}
.filter-num {
  color: #1890ff;
}
.footSubmit {
  padding: 10px 16px;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 500px;
  border-top: 1px solid #f5f5f5;
  z-index: 99999;
}
.tag-wrap {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-tag {
  background: #f4f5f6;
  border-radius: 4px;
  margin-top: 10px;
  margin-right: 10px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
}
.tag-text {
  margin-right: 20px;
  max-width: 412px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>